import React, { useEffect, useState, useRef } from 'react';
// import { Table } from 'antd';

const App = (props) => {
  const { columns = [], list = [], height = 200 } = props;

  // const [timer, setTimer] = useState(); // 定时器

  useEffect(() => {
    
  }, []); 

  // // 开启定时器
  // const InitialScroll = (data) => {
  //   clearInterval(timer)
  //   let container = TableContainer.current;
  //   container = container.getElementsByClassName('ant-table-body')[0];
  //   if (data.length > Number(rollNum) && flag) {
  //     // 只有当大于10条数据的时候 才会看起滚动
  //     let time = setInterval(() => {
  //       container.scrollTop += Number(rollTop);
  //       if (Math.ceil(container.scrollTop) >= Number(container.scrollHeight - container.clientHeight)) {
  //         container.scrollTop = 0;
  //         // setTimeout(() => { container.scrollTop = 0 }, 1000)
  //       }
  //     }, Number(rollTime));
  //     setTimer(time); // 定时器保存变量 利于停止
  //   }
  // };
  return (
    <div className='app-scroll' style={{ height }}>
      <div className='app-scroll-columns'>
        {
          columns.map((item, index) => (
            <span key={index} style={{ width: item?.width || "auto" }}>{ item.name }</span>
          ))
        }
      </div>
      <div className="app-scroll-list">
        {
          columns.map((item, index) => (
            <span key={index} style={{ flex: item?.flex || 1 }}>{ list[index].name }</span>
          ))
        }
      </div>
    </div>
  );
}

export default App;





